<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="__JS__/layui/css/layui.css">
    <script type="text/javascript" src="__JS__/layui/layui.js"></script>
    <script type="text/javascript" src="__JS__/treeTable.js"></script>
    <title>{$Think.config.admin_title}</title>
    <link rel="stylesheet" href="__JS__/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="__JS__/layui_ext/dtree/font/dtreefont.css">
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>用户列表</legend>
    </fieldset>
    <div class="layui-fluid">
        <div class="layui-btn-container" style="display: inline-block;">
            <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe668;</i>展开全部
            </button>
            <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe66b;</i>折叠全部
            </button>
        </div>
        <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
            style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;" />
        <div class="layui-btn-container" style="display: inline-block;">
            <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
            <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#x1006;</i>清除搜索
            </button>
        </div>
        <div class="layui-btn-container" style="display: inline-block;">
            <button id="btnPush" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe678;</i>推送消息
            </button>
        </div>
    </div>
    <div class="demo-side">
        <table id="demoTreeTb"></table>
    </div>
    </div>

    <table id="users"></table>
    <!-- 表格操作列 -->
    <script type="text/html" id="tbBar">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="read_file">文件</a>
            <a class="layui-btn layui-btn-sm" lay-event="add">新增</a>
            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="disable">禁用</a>
            <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="enable">启用</a>
            <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
        </div>
    </script>

    <script>
        layui.config({
            base: '__JS__/'
        }).use(['treeTable'], function () {
            var treeTable = layui.treeTable;
            var layer = layui.layer;
            var $ = layui.jquery;
            var insTb = treeTable.render({
                elem: '#users',
                url: "{:url('admin/staff/users')}",
                skin: 'line',
                showCheckbox: false,
                tree: {
                    iconIndex: 2, // 折叠图标显示在第几列
                    isPidData: false, // 是否是id、pid形式数据
                    idName: 'title', // id字段名称
                    childName: 'children', // pid字段名称
                    arrowType: 'arrow2'
                },
                cols: [{
                    type: 'numbers'
                }, {
                    type: 'checkbox'
                }, {
                    field: 'title',
                    title: '人员'
                }, {
                    field: 'user_name',
                    title: '负责人'
                }, {
                    field: 'market',
                    title: '销售老师',
                    width: 150
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 50
                }, {
                    field: 'age',
                    title: '年龄',
                    width: 50
                }, {
                    field: 'mobile',
                    title: '手机号',
                    width: 150
                }, {
                    field: 'enable',
                    title: '状态',
                    width: 50
                }, {
                    align: 'center',
                    toolbar: '#tbBar',
                    title: '操作',
                    width: 300
                }]
            });
            treeTable.on('tool(users)', function (obj) {
                var event = obj.event;
                var that = this;
                var data = obj.data;
                let url = '';

                switch (event) {
                    case 'edit':
                        if (data.type == 'user') {
                            console.log(data);
                            url = (data.link);
                            if (data.id == "0") {
                                url = '/admin/users/editUser/id/' + data.market_id;
                            }
                        } else if (data.type == 'shop') {
                            url = '/admin/users/editShop/id/' + data.id;
                        } else {
                            url = '/admin/users/editUser/id/' + data.id;
                        }
                        addTab(url, '修改');
                        break;
                    case 'add':
                        // delete (data.children);
                        url = '/admin/staff/add?market_id=' + data.market_id + '&id=' + data.id + '&type=' + data.type;
                        if (data.type == 'shop') {
                            url = '/admin/staff/add?market_id=' + data.market_id + '&id=' + data.id + '&type=' + data.type;
                        }
                        else if (data.type != 'user') {
                            url = '/admin/users/addUser?superior_id=' + data.id + '&role=' + data.type;
                        }
                        addTab(url, '新增');
                        break;
                    case 'read_file':
                        if (data.type != 'user' || data.id == "0") {
                            return false;
                        }
                        layer.open({
                            type: 2,
                            title: data.name,
                            area: ['450px', '600px'],
                            shade: 0,
                            maxmin: true,
                            content: 'read_file?id=' + data.id,
                            zIndex: layer.zIndex,
                            success: function (layero) {
                                layer.setTop(layero);
                            }
                        });
                        break;
                    case 'delete':
                        if (data.type != 'user') {
                            return layer.msg('删除人员请前往角色列表');
                        }
                        if (data.id == "0") {
                            return layer.msg('未绑定顾客,无法删除');
                        }
                        let openIndex = layer.open({
                            type: 1,
                            title: false //不显示标题栏
                            ,
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'deleteUser' //设定一个id，防止重复弹出
                            ,
                            btn: ['确认删除', '我再想想'],
                            btnAlign: 'c',
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">确认要删除<br>' + data.title + ' 吗?<br>删除后不可撤回</div>',
                            yes: function (layero) {
                                $.post('/admin/staff/deleteUser/id/' + data.id, {}, (res) => {
                                    layer.msg(res.msg, {
                                        time: 1000
                                    }, () => {
                                        insTb.refresh();
                                        layer.close(openIndex);
                                    });
                                });
                            }
                        });
                        break;
                    case 'disable', 'enable':
                        updateUsers(obj.data, obj.event);
                        break;

                    default:
                        break;
                }

            });

            function addTab(url, title) {
                if (url == '') {
                    return false;
                }
                let a = document.createElement('a');
                a.href = url;
                a.innerHTML = title;
                a.className = 'J_menuItem';
                return parent.menuItem(a);
            }
            function updateUsers(data, is_enable) {
                $.post("{:url('admin/staff/enableUsers')}", {
                    data: data,
                    is_enable: is_enable
                }, (res) => {
                    layer.msg(res.msg);
                    insTb.refresh();
                })
            }
            // 全部展开
            $('#btnExpandAll').click(function () {
                insTb.expandAll();
            });

            // 全部折叠
            $('#btnFoldAll').click(function () {
                insTb.foldAll();
            });
            // 搜索
            $('#btnSearch').click(function () {
                var keywords = $('#edtSearch').val();
                if (keywords) {
                    insTb.filterData(keywords);
                } else {
                    insTb.clearFilter();
                }
            });

            // 清除搜索
            $('#btnClearSearch').click(function () {
                insTb.clearFilter();
            });

            $('#btnPush').click(() => {
                let users = insTb.checkStatus().map((d) => d.type == 'user' ? d.id : null).filter((i) => !!i).join(',');
                if (users == '') {
                    return layer.msg('请勾选顾客');
                }
                layer.open({
                    type: 2,
                    title: '推送消息',
                    area: ['600px', '800px'],
                    shade: 0,
                    maxmin: true,
                    content: 'pushMessage?ids=' + users,
                    zIndex: layer.zIndex,
                    success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            });
        });
    </script>

</body>

</html>